<template>
    <el-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="date" label="名称" width="180"> </el-table-column>
    <el-table-column prop="name" label="权限值" width="180"> </el-table-column>
    <el-table-column prop="address" label="跳转权限值"> </el-table-column>
    <el-table-column prop="address" label="操作">
      <el-button
        type="primary"
        size="mini"
        class="el-icon-plus"
        @click="dialogFormVisible = true"
      ></el-button>
      <el-button
        type="primary"
        size="mini"
        class="el-icon-edit-outline"
        @click="dialogFormVisible = true"
      ></el-button>

        <el-popconfirm title="确定删除用户吗？">
          <el-button
            title="删除"
            slot="reference"
            class="el-icon-delete"
            type="danger"
            size="mini"
            style="margin-left: 10px"
          ></el-button>
        </el-popconfirm>
    </el-table-column>

    <!-- 添加弹框 -->

    <el-dialog
      title="修改菜单"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form :model="form" :rules="rules">
        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="功能权限值"
          prop="function"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-table>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      tableData1: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          hasChildren: true,
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { message: "名称必须输入", trigger: "blur" },
        ],
        function: [
          { required: true, message: "请输入功能权限值", trigger: "blur" },
          { message: "功能权限值必须输入", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 32,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
        ]);
      }, 1000);
    },
  },
};
</script>

<style scoped>

</style>